<template>
  <a-spin :spinning="loading">
    <div class="lbm-left-bottom">
      <div class="center">
        <div class="ranking bg-color-black">
          <span>
            <i class="iconfont icon-tongji2"></i>
          </span>
          <!-- <span class="fs-xl text mx-2 mb-1">道路健康排行榜</span> -->
          <!-- <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" /> -->

          <a-row :gutter="[12, 12]" class="defect-cara-row">
            <a-col :xs="12" :sm="12" :md="12" :xl="12" :xxl="12" v-for="item in defectStatisticInfo" :key="item.typeId">
              <div class="defect-cara-d">
                <div class="name">{{ item.typeName }}</div>
                <div class="count">{{ item.typeCount }}</div>
              </div>
            </a-col>
          </a-row>
        </div>

      </div>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import axios from 'axios';
import qs from 'qs';
import { reactive, onMounted, ref } from 'vue'
// interface Props {
//   searchInfo: any[]
// }

// const props = withDefaults(defineProps<Props>(), {

// })
const loading = ref(true)

const defectStatisticInfo = ref([])
const setData = async (params) => {
  let url = `http://luyisheng-api.xiyuefa.cn/luyisheng/doctorRoad/roadImage/statisticDiseaseTypeCount`;
  if (params) {
    url = `http://luyisheng-api.xiyuefa.cn/luyisheng/doctorRoad/roadImage/statisticDiseaseTypeCount?${qs.stringify(params)}`;
  }
  loading.value = true
  const res = await axios.get(url, {
    headers: {
      'Content-Type': 'application/json', // 设置请求头为 JSON 格式
    },
  });
  loading.value = false
  // console.log("res 111 222 33 ==>", res)
  if (!res.data || !res.data.result) {
    return
  }
  const list = res.data.result
  defectStatisticInfo.value = list

  // console.log("res 111 222 33 ==>", defectStatisticInfo.value)
}

// 初始化数据
onMounted(() => {
  setData(null)
})

const setSearchInfo = (params) => {
  loading.value = true
  setData(params)
}

// const ranking = reactive({
//   data: props.data,
//   // data: [
//   //   {
//   //     name: '临延线',
//   //     value: 55
//   //   },
//   //   {
//   //     name: '018乡道',
//   //     value: 120
//   //   },
//   //   {
//   //     name: '嘉运路',
//   //     value: 78
//   //   },
//   //   {
//   //     name: '025乡道',
//   //     value: 66
//   //   },
//   //   {
//   //     name: '蒲伊西街',
//   //     value: 80
//   //   },
//   //   {
//   //     name: '昌平大街',
//   //     value: 80
//   //   },
//   //   {
//   //     name: '锦绣大街',
//   //     value: 80
//   //   }
//   // ],
//   carousel: 'single',
//   // unit: '人'
//   columnWidth: [100, 200, 130],
// })


// // 设置数据
// const setData = () => {

// }

defineExpose({
  setSearchInfo
})
</script>

<style lang="scss" scoped>
.lbm-left-bottom {
  width: 300px;

  .center {
    display: flex;
    flex-direction: column;

    .bg-color-black {
      border-radius: 5px;
    }

    .ranking {
      padding: 10px;
      // width: 59%;

      .dv-scr-rank-board {
        height: 220px;
      }
    }
  }

  .defect-cara-row {
    overflow-y: scroll;
    max-height: 230px;
    margin-top: 10px;
    width: 100%;


    .defect-cara-d {
      padding: 10px 0px;
      background: #063447;

      .name {
        padding-left: 20px;
        font-size: 18px;
        line-height: 26px;
      }

      .count {
        padding-left: 20px;
        font-size: 26px;
        line-height: 34px;
        color: rgba(114, 220, 195, 1);
      }
    }

  }


}
</style>
